<template>
  <button
      :class="{
    primary:type==='primary',success:type==='success',warning:type==='warning',danger:type==='danger',
    medium:size==='medium',small:size==='small',
    round:round
    }"
      @click="onButtonClick"
  >
    <img v-if="loading" class="loading" src="@/assets/icon/loading.png" alt="">
    <span>{{ text }}</span>
  </button>
</template>

<script>
export default {
  name: "w-button",
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: ''
    },
    round: Boolean,
    loading: Boolean
  },
  data() {
    return {}
  },
  computed: {
    text() {
      let txt = ''
      if( this.$slots.default) {
        txt = this.$slots.default[0].text
      } else {
        txt = '按钮'
      }
      return txt
    }
  },
  methods: {
    onButtonClick() {
      this.$emit('click')
    }
  },
  created() {

  }
}
</script>

<style lang="less" scoped>
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg-active(@bg,@active) {
  color: #fff;
  background-color: @bg;
  border: 1px solid @bg;
  &:active {
    color: #fff;
    background-color: @active;
    border: 1px solid @active;
  }
}

button {
  outline: none;
  font-size: .4rem;
  color: rgb(96, 98, 102);
  padding: .24rem .4rem;
  border-radius: .1rem;
  background-color: #fff;
  border: 1px solid rgb(220, 223, 230);
  .flex-center();

  &:active {
    color: rgb(64, 158, 255);
    background-color: rgb(236, 245, 255);
    border-color: rgb(198, 226, 255);
  }
  img{
    width: .4rem;
    height: .4rem;
  }
}

.primary {
  .bg-active(#409eff, #3a8ee6); // 主要按钮
}

.success {
  .bg-active(#67c23a, #5daf34); // 成功按钮
}

.warning {
  .bg-active(#e6a23c, #cf9236); // 警告按钮
}

.danger {
  .bg-active(#f56c6c, #dd6161); // 危险按钮
}

// padding: .24rem .4rem;
// 0.6 : 1
.medium {
  padding: .18rem .3rem;
}

.small {
  padding: .12rem .2rem;
  font-size: .36rem;
}

.round {
  border-radius: 1rem;
}
.loading{
  animation: rotate 2s linear infinite;
  pointer-events: none;
  margin-right: .2rem;
}

@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(359deg)
  }
}
</style>